<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('Magic_Coffee咖啡店-购物车','order-confirm')">
</head>
<body>
<header th:replace="mall/header::header-fragment"></header>
<content id="content">
    <nav th:replace="mall/header::header-search-fragment"></nav>
    <div class="crumb">
        <div class="w">
            <div class="crumb-con">
                <a href="index.html" class="link">Mall</a>
                <span> > </span>
                <span class="link-text">订单确认</span>
            </div>
        </div>
    </div>

    <div class="page-wrap w">
        <div class="panel">
            <h1 class="panel-title">收货地址</h1>
            <div class="panel-body address-con">
                <th:block th:each="receiverList : ${shippingResult}">
                    <div class="address-item" th:attr="data-id=${receiverList.id}">
                        <div class="address-title">
                            [[ ${receiverList.receiverProvince} ]]  [[ ${receiverList.receiverCity} ]]  （ [[ ${receiverList.receiverName} ]] 收 ）
                        </div>
                        <div class="address-detail">
                            [[ ${receiverList.receiverAddress} ]]  [[ ${receiverList.receiverPhone} ]]
                        </div>
                        <div class="address-opera">
                            <span class="link address-update">编辑</span>
                            <span class="link address-delete">删除</span>
                        </div>
                    </div>
                </th:block>
                    <div class="address-add">
                        <div class="address-new">
                            <i class="fa fa-plus"></i>
                            <div class="text">使用新地址</div>
                        </div>
                    </div>
            </div>
        </div>
        <div class="panel">
            <h1 class="panel-title">商品清单</h1>
            <div class="panel-body product-con">

                <table class="product-table">
                    <tr>
                        <th class="cell-img">&nbsp;</th>
                        <th class="cell-info">商品描述</th>
                        <th class="cell-price">价格</th>
                        <th class="cell-count">数量</th>
                        <th class="cell-total">小计</th>
                    </tr>
<!--                    {{#orderItemVoList}}-->
                    <th:block th:each="orderItemVoList : ${productList.orderItemVoList}">
                    <tr>
                        <td class="cell-img">
                            <a th:href="@{'./detail.html?productId='+${orderItemVoList.productId}}" target="_blank">
                                <img th:src="@{${productList.imageHost}+${orderItemVoList.productImage}}" th:alt="${orderItemVoList.productName}" class="p-img">
                            </a>
                        </td>
                        <td class="cell-info">
                            <a class="link" th:href="@{'./detail.html?productId='+${orderItemVoList.productId}}" target="_blank"> [[ ${orderItemVoList.productName} ]]</a>
                        </td>
                        <td class="cell-price">￥[[ ${orderItemVoList.currentUnitPrice} ]]</td>
                        <td class="cell-count">[[ ${orderItemVoList.quantity} ]]</td>
                        <td class="cell-total">￥[[ ${orderItemVoList.totalPrice} ]]</td>
                    </tr>
                    </th:block>
<!--                    {{/orderItemVoList}}-->
                </table>
                <div class="submit-con">
                    <span>订单总价:</span>
                    <span class="submit-total">￥[[ ${productList.productTotalPrice} ]]</span>
                    <span class="btn order-submit">提交订单</span>
                </div>

            </div>
        </div>
        <div class="modal-wrap" >
            <div class="modal fade" id="modal-address" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="gridSystemModalLabel">添加新地址</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form">
                                <div class="form-line">
                                    <label class="label-address" for="receiver-name">
                                        <span class="required">*</span>收件人姓名：
                                    </label>
                                    <input class="form-item" id="receiver-name" placeholder="请输入收件人姓名" value="" />
                                </div>
                                <div class="form-line">
                                    <label class="label-address" for="receiver-province">
                                        <span class="required">*</span>
                                        所在省份：
                                    </label>
                                    <input class="form-item" id="receiver-province" placeholder="省份" value=""/>
                                </div>
                                <div class="form-line">
                                    <label class="label-address" for="receiver-city">
                                        <span class="required">*</span>
                                        所在城市：
                                    </label>
                                    <input class="form-item" id="receiver-city" placeholder="城市" value=""/>
                                </div>
                                <div class="form-line">
                                    <label class="label-address" for="receiver-address">
                                        <span class="required">*</span>
                                        详细地址：
                                    </label>
                                    <input class="form-item" id="receiver-address" placeholder="请精确到门牌号" value=""/>
                                </div>
                                <div class="form-line">
                                    <label class="label-address" for="receiver-phone">
                                        <span class="required">*</span>
                                        收件人手机：
                                    </label>
                                    <input class="form-item" id="receiver-phone" placeholder="请输入11位手机号"  value=""/>
                                </div>
                                <div class="form-line">
                                    <label class="label-address" for="receiver-zip">邮政编码：</label>
                                    <input class="form-item" id="receiver-zip" placeholder="如：100000"  value=""/>
                                </div>
                                <div class="form-line">
                                    <input type="hidden" id="receiver-id" value="" />
                                    <a class="btn address-btn">保存收货地址</a>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" id="close-modal-address" data-dismiss="modal">Close</button>
                            <!--<button type="button" class="btn btn-primary">Save changes</button>-->
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->

<!--             编辑修改地址-->
            <div class="modal fade" id="modal-address-edit" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel-edit">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="gridSystemModalLabel-edit">更改地址</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form">
                                <div class="form-line">
                                    <label class="label-address" for="receiver-name-edit">
                                        <span class="required">*</span>收件人姓名：
                                    </label>
                                    <input class="form-item" id="receiver-name-edit" placeholder="请输入收件人姓名" value="" />
                                </div>
                                <div class="form-line">
                                    <label class="label-address" for="receiver-province-edit">
                                        <span class="required">*</span>
                                        所在省份：
                                    </label>
                                    <input class="form-item" id="receiver-province-edit" placeholder="省份" value=""/>
                                </div>
                                <div class="form-line">
                                    <label class="label-address" for="receiver-city-edit">
                                        <span class="required">*</span>
                                        所在城市：
                                    </label>
                                    <input class="form-item" id="receiver-city-edit" placeholder="城市" value=""/>
                                </div>
                                <div class="form-line">
                                    <label class="label-address" for="receiver-address-edit">
                                        <span class="required">*</span>
                                        详细地址：
                                    </label>
                                    <input class="form-item" id="receiver-address-edit" placeholder="请精确到门牌号" value=""/>
                                </div>
                                <div class="form-line">
                                    <label class="label-address" for="receiver-phone-edit">
                                        <span class="required">*</span>
                                        收件人手机：
                                    </label>
                                    <input class="form-item" id="receiver-phone-edit" placeholder="请输入11位手机号"  value=""/>
                                </div>
                                <div class="form-line">
                                    <label class="label-address" for="receiver-zip-edit">邮政编码：</label>
                                    <input class="form-item" id="receiver-zip-edit" placeholder="如：100000"  value=""/>
                                </div>
                                <div class="form-line">
                                    <input type="hidden" id="receiver-id-edit" value="" />
                                    <a class="btn address-btn-edit">保存收货地址</a>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" id="close-modal-address-edit" data-dismiss="modal">Close</button>
                            <!--<button type="button" class="btn btn-primary">Save changes</button>-->
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        </div>
    </div>

</content>
<div th:replace="mall/general-footer::general-footer-fragment"></div>

<link rel="stylesheet" th:href="@{/mall/css/bootstrap/3.3.7/bootstrap.min.css}">
<script th:src="@{/admin/plugins/jquery/jquery-3.5.1.min.js}"></script>
<script th:src="@{/mall/js/bootstrap/3.3.7/bootstrap.min.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<script th:src="@{/admin/dist/js/public.js}"></script>
<script th:src="@{/mall/js/order/order-confirm.js}" type="text/javascript"></script>
</body>
</html>